<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 21:40:15
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 15:36:08
 * @FilePath: /bangand-low-code/src/layouts/components/AppLogo.vue
 * @Description: icon 标题 显示
-->
<template>
  <div class="anticon" style="padding-left: 12px" :class="getAppLogoClass" @click="goHome">
    <img src="@/assets/logo.svg" />
    <div class="x-m-l-xs truncate" :class="getTitleClass" v-show="showTitle">
      {{ getProjectTitle }}
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import defaultSettings from '@/config/defaultSettings';

export default {
  // 组件的名字或者页面的名字
  name: 'AppLogo',
  mixins: [],
  // 加载组件
  components: {},
  // 父级组件传过来的值
  props: {
    /**
     * The theme of the current parent component
     */
    theme: {
      type: String,
      default: 'light',
      validator: (v) => ['light', 'dark', 'blue', 'light-dark', 'light-blue'].includes(v)
    },

    /**
     * Whether to show title
     */
    showTitle: {
      type: Boolean,
      default: true
    },

    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: {
      type: Boolean,
      default: false
    }
  },
  // 页面数据
  data() {
    return {
      prefixCls: 'app-logo'
    };
  },
  computed: {
    // 样式
    getAppLogoClass() {
      return [this.prefixCls, this.theme];
    },

    getTitleClass() {
      return [`${this.prefixCls}__title`];
    },

    // 项目名字
    getProjectTitle() {
      return defaultSettings.title;
    }
  },
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {
    // 回首页
    goHome() {
      this.$router.push({
        path: '/dashboard/analysis'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.app-logo {
  display: flex;
  align-items: center;
  padding-left: 7px;
  cursor: pointer;
  transition: all 0.2s ease;

  &.collapsed-show-title {
    padding-left: 20px;
  }

  &__title {
    font-size: 16px;
    font-weight: 700;
    transition: all 0.5s;
    line-height: normal;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
